﻿@namespace BlazorDemo.Pages.CaseViews

<div class="demo-description">
    <h2><DemoNavLink Link="Calendar#DateRange" />Date Range</h2>
    <p>Use the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.MinDate">MinDate</a> and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxCalendar-1.MaxDate">MaxDate</a> properties to specify a range of available dates. The calendar disables dates that are out of the range and hides navigation arrows for them.</p>
    <p>In this demo, the Calendar component allows users to select dates from the current month.</p>
</div>

<div class="card demo-card border-0 bg-transparent">
    <div class="card-body p-0">
        <DxCalendar T="DateTime" MinDate="@MinDate" MaxDate="@MaxDate">
        </DxCalendar>
    </div>
</div>

<CodeSnippet_Editor_Calendar_MinMaxDate/>

@code {
    DateTime MinDate { get; set; }
    DateTime MaxDate { get; set; }

    protected override void OnInitialized() {
        DateTime currentDateTime = DateTime.Now;

        MinDate = new DateTime(currentDateTime.Year, currentDateTime.Month, 1);
        MaxDate = new DateTime(currentDateTime.Year, currentDateTime.Month, DateTime.DaysInMonth(currentDateTime.Year, currentDateTime.Month));
    }
}
